<template>
  <PageWrapper title="">
    <vxe-form :data="formConditionData.data" title-colon collapse-status @submit="load">
      <vxe-form-item title="操作类型" field="isGift" :folding="false" span="6">
            <template #default="{ data }">
            <a-select
                v-model:value="data.ioType"
                show-search
                placeholder="请选择"
                :options="ioTypeList"
                :field-names="{ label: 'label', value: 'ID', }"
                :filter-option="((input: string, option: any) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0)"
                :allow-clear="true"
                />
            </template>
        </vxe-form-item>

        <vxe-form-item title="仓库/库区" field="wid" span="6" :folding="false">
            <template #default="{ data }">
            <a-tree-select
            v-model:value="data.wid"
            show-search
            :allow-clear="true"
            tree-default-expand-all
            :tree-data="warehouseList"
            :field-names="{
                value: 'ID',
                label: 'name',
                children: 'areaList',
            }"
            tree-node-filter-prop="name"
            placeholder="请选择"
            />
        </template>
        </vxe-form-item>

        <vxe-form-item title="货物" field="isGift" :folding="false" span="6">
            <template #default="{ data }">
            <a-select
                v-model:value="data.goodsId"
                show-search
                placeholder="请选择"
                :options="goodsList"
                :field-names="{ label: 'name', value: 'ID', }"
                :filter-option="((input: string, option: any) => option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0)"
                :allow-clear="true"
                />
            </template>
        </vxe-form-item>

        <vxe-form-item align="center">
        <template #default>
            <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="load" title="点击查询">查询</vxe-button>
            <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
                <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
            </a-popconfirm>
        </template>
        </vxe-form-item>
        </vxe-form>

    <XGrid
ref="xGrid"
      :stripe="false"
      :show-overflow="false"
      :columns="columns"
      :height="height"
      :query-params="formConditionData.data"
      :query-api="getHistoryData"
      @detail="handleDetail"
      />
  </PageWrapper>
</template>
<script lang="ts" name="InAndOutHistory" setup>
import { reactive, ref } from 'vue';
import { columns } from './data';
import { DictItem, getListByMark } from "/@/api/admin/dict";
import { getListData as getGoodsListData } from '/@/api/wms/goods';
import { getHistoryData } from "/@/api/wms/history";
import { getListData as getWarehouseListData } from "/@/api/wms/warehouse";
import { WmsInventoryItem } from "/@/api/wms/wms-model";
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';
import { useGo } from '/@/hooks/web/usePage';

const go = useGo();
const xGrid = ref()
const height = window.innerHeight - 150

const handleDetail = (row:WmsInventoryItem) => {
  const workType = row.bill.workType
  const code = row.bill.code
  if (workType === 1) {
    go('/warehouse-business/tab/inbound/'+code+'/0/0');
  }
  if (workType === 2) {
    go('/warehouse-business/tab/outbound/'+code+'/0/0');
  }
  if (workType === 3) {
    go('/warehouse-business/tab/move/'+code+'/0/0');
  }
  if (workType === 4) {
    go('/warehouse-business/tab/pandian/'+code+'/0/0');
  }
}

const formConditionData = reactive({data: {
  ioType: null,
  wid: null,
  goodsId: null,
}})

const load = () => {
  xGrid.value.reload()
}

const reset = () => {
  Object.assign(formConditionData, {data: {}});
  xGrid.value.reload(true)
}

const ioTypeList = ref<DictItem[]>()
getListByMark({mark: 'bill-inbound-type'}).then(dd => {
  ioTypeList.value = dd.filter(e => e.tag === 0)
})
const goodsList = ref([])
getGoodsListData().then(dd => goodsList.value = dd as any)
const warehouseList = ref([])
getWarehouseListData().then(dd => warehouseList.value = dd as any)

</script>

<style scoped>
</style>
